<template>
  <div class="modules-txcos">
    <a-modal
      :width="640"
      :visible="visible"
      :confirmLoading="loading"
      @ok="() => { $emit('ok') }"
      @cancel="() => { $emit('cancel') }"
      ok-text="保存"
      cancel-text="取消"
    >
      <a-spin :spinning="loading">
        <a-form :form="form" v-bind="formLayout">
          <a-form-item>
            <a-input v-decorator="['pid', { initialValue: pid }]" type="hidden" />
          </a-form-item>
          <!-- <a-form-item
            label="APPID"
          >
            <a-input placeholder="" v-decorator="['APPID', {rules:[{required: true, message: 'APPID'}]}]" />
          </a-form-item>   -->
          <a-form-item
            label="SecretId"
          >
            <a-input placeholder="" v-decorator="['SecretId', {rules:[{required: true, message: '请填写SecretId'}]}]" />
          </a-form-item>  
          <a-form-item
            label="SecretKey"
          >
            <a-input placeholder="" v-decorator="['SecretKey', {rules:[{required: true, message: '请填写SecretKey'}]}]" />
          </a-form-item>
          <a-form-item
            label="Bucket"
          >
            <a-input v-decorator="['Bucket', { initialValue: '', rules:[{required: true, message: '请填写Bucket'}]}]" />
          </a-form-item>
          <a-form-item
            label="存储区域"
          >
            <a-select v-decorator="['Region', {initialValue: 'ap-beijing-1', rules:[{required: true}]}]">
              <a-select-option value="ap-beijing-1">北京一区</a-select-option>
              <a-select-option value="ap-beijing">北京</a-select-option>
              <a-select-option value="ap-nanjing">南京</a-select-option>
              <a-select-option value="ap-shanghai">上海</a-select-option>
              <a-select-option value="ap-guangzhou">广州</a-select-option>
              <a-select-option value="ap-chengdu">成都</a-select-option>
              <a-select-option value="ap-chongqing">重庆</a-select-option>
              <a-select-option value="ap-shenzhen-fsi">深圳金融</a-select-option>
              <a-select-option value="ap-shanghai-fsi">上海金融</a-select-option>
              <a-select-option value="ap-beijing-fsi">北京金融</a-select-option>
              <a-select-option value="ap-hongkong">中国香港</a-select-option>
              <a-select-option value="ap-singapore">新加坡</a-select-option>
              <a-select-option value="ap-mumbai">孟买</a-select-option>
              <a-select-option value="ap-seoul">首尔</a-select-option>
              <a-select-option value="ap-bangkok">曼谷</a-select-option>
              <a-select-option value="ap-tokyo">东京</a-select-option>
              <a-select-option value="na-siliconvalley">硅谷（美西）</a-select-option>
              <a-select-option value="na-ashburn">弗吉尼亚（美东）</a-select-option>
              <a-select-option value="na-toronto">多伦多</a-select-option>
              <a-select-option value="eu-frankfurt">法兰克福</a-select-option>  
              <a-select-option value="eu-moscow">莫斯科</a-select-option>       
            </a-select>
          </a-form-item>   
          <a-form-item
            label="协议"
          >
            <a-select v-decorator="['protocol', {initialValue: 'http:', rules:[{required: true}]}]">
              <a-select-option value="http:">http</a-select-option>
              <a-select-option value="https:">https</a-select-option>            
            </a-select>
          </a-form-item>                 
          <a-form-item
            label="CDN域名"
          >
            <a-input placeholder="如：www.baidu.com" v-decorator="['domain', {initialValue: '', rules:[{required: false, message: '请填写域名'}]}]" />
          </a-form-item>
          <a-form-item
            label="自定义路径"
          >
            <a-input v-decorator="['path', {initialValue: 'images', rules:[{required: false}]}]" />
          </a-form-item>                              
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import pick from 'lodash.pick'
import COMMON from '@/store/common'

// 表单字段
const fields = ['pid', 'SecretId', 'SecretKey', 'Bucket', 'Region', 'domain', 'protocol', 'path']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      pid: COMMON.txcos,
      form: this.$form.createForm(this)
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  methods: {
    validatorDomain () {
      //
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .ant-form-item {
    margin-bottom: 0px;
  }
</style> 